<template>
    <!--index.wxml-->
    <view class="page">

        <view class="head-part transBg">
            <!-- <image src="https://oss.qmxip.com/flash_goods/1085563945834180608.png" class="userBg"></image> -->
            <view class="userinfo">

                <view class="left-box">
                    <view class="userNickName" v-if="userId">{{wechatInfo.nickname}}</view>
                    <text class="userNickName" v-else @click="goLogin" data-key='add'>请点击登录</text>
                   
                </view>
                <view class="right-box">

                    <UserHead :showTimeOut.sync=" isTimeOut" :showOutTime.sync=" showTimeStr"  @goLogin="openAuthFunc"/>
                   
                </view>
            </view>
        </view>

        <view class="center-box">


            <view class="col-item" data-key='add' @click="goLogin('/pages/authInfo/index')">
                <image class="l" src="/static/images/user/card.png" mode='aspectFit'></image>
                <view class="m">{{ userId ? '完善信息' : '用户登录'}}</view>
                <image class="r" src="/static/images/user/more.png" mode='aspectFit'></image>
            </view>
            <view class="col-item" @click="$goNext('/pages/center/order/index','switchTab')">
                <view class="l">
                    <text class="icon-chushen iconfont col-h f32" >  </text>
                </view>
                <view class="m">我的订单</view>
                <image class="r" src="/static/images/user/more.png" mode='aspectFit'></image>
            </view>
            <view class="col-item" @click="goLogin('/pages/center/address/index')">
                <view class="l">
                    <text class="icon-dizhi1 iconfont col-h f32" >  </text>
                </view>
                <view class="m">地址管理</view>
                <image class="r" src="/static/images/user/more.png" mode='aspectFit'></image>
            </view>
            <view class="col-item" @click="goLogin('/pages/center/certificate/index')">
                <view class="l">
                    <text class="icon-dianpu1 iconfont col-h f32" >  </text>
                </view>
                <view class="m">我的优惠券</view>
                <image class="r" src="/static/images/user/more.png" mode='aspectFit'></image>
            </view>
            <!-- <view class="col-item">
                <image class="l" src="/static/images/user/notice.png" mode='aspectFit'></image>
                <view class="m">消息通知</view>
                <image class="r" src="/static/images/user/more.png" mode='aspectFit'></image>
            </view>
            <view class="col-item">
                <image class="l" src="/static/images/user/layout.png" mode='aspectFit'></image>
                <view class="m">注销登录</view>
                <image class="r" src="/static/images/user/more.png" mode='aspectFit'></image>
            </view> -->
        </view>

        <GetPhone :isShow.sync="showAuthorize" @finish="finishAuth" />
    </view>
</template>
<script>
import GetPhone from '../../components/GetPhone'
import UserHead from '../../components/UserHead'
const app = getApp();
export default {
    components: {  GetPhone ,UserHead},
    data () {
        return {

            showAuthorize: false,
            isDelivery: false, //是否配送人员
            isShoper: false, //是否商户人员

            isTimeOut:undefined,
            showTimeStr:undefined,
        }
    },
    computed: {
        // canUseProduct () { return this.$store.getters.userInfo.canUseProduct },
        // accountType () { return this.$store.getters.accountType },
        userId () { return this.$store.getters.userId },
        userInfo () { return this.$store.getters.userInfo },
        wechatInfo () { return this.$store.getters.wechatInfo },
        //是否 修改了用户昵称
        wechatInfoName () {

            let wechatInfo = this.$store.getters.wechatInfo

            if (wechatInfo.nickname && wechatInfo.nickname != '微信用户') {

                return wechatInfo.nickname
            }

            return ''
        },
      
    },
    // watch: {
    //     accountType: {
    //         immediate: true,
    //         handler (current) {

    //             if (current.includes('2')) {
    //                 this.isShoper = true
    //             }
    //             if (current.includes('3')) {

    //                 this.isDelivery = true
    //             }


    //         }
    //     }
    // },
    onShow () {

        app.laterToken(bool => {

            app.logRecord('个人中心')

        })


    },
    mounted () {


    },
    //分享
    onShareAppMessage (obj) {


        // console.log('99999999', obj)

        // if (obj.from == 'button') {

            return {
                title: `甜城小二(大闸蟹同城配送)`,
            }

        // }
        // else {
        //     return {
        //         path: `/pages/index/index`, //跳转链接
        //     }
        // }



    },
    methods: {
        goLogin (e) {

            this.areadyLogin(() => {

                uni.navigateTo({
                    url: e
                })

            })

        },
        //是否已经登录
        areadyLogin (cb) {

            if (this.userId) {
                cb && cb()

                return
            }

            this.loginCallBack = cb

            this.showAuthorize = true

        },
        //结束了授权
        finishAuth () {

            this.userId = app.globalData.userId

            this.loginCallBack()

        },
        finishInfo () {

            this.onShow()
        },
        //打开授权框
          openAuthFunc(){
            this.showAuthorize = true
        },

    }
}
</script>
<style lang="scss" scoped>
.page {
    box-sizing: border-box;
    min-height: 100vh;
    background-color: #efefef;
}
.head-part {
    height: 500rpx;
    position: relative;
    border-radius: 0 0 30px 30px;
}
.head-part .userBg {
    width: 100%;
    height: 100%;
}
.userinfo {
    display: flex;
    align-items: center;

    position: absolute;
    z-index: 10;
    left: 0;
    top: 40%;
    width: 100%;
    padding: 0 34rpx;
    .left-box {
        flex: 1;
        color: #f1f1f1;

        .userNickName {
            font-size: 44rpx;
            margin-bottom: 14rpx;
        }
        .img {
            vertical-align: middle;
            margin-right: 10rpx;
            width: 38rpx;
            height: 38rpx;
            border-radius: 50%;
        }
    }
    .right-box {
        .a-tags {
            position: absolute;
            width: 42rpx;
            height: 42rpx;
            text-align: center;
            border-radius: 50%;
            right: 30rpx;
            bottom: 10rpx;
            overflow: hidden;
            image {
                width: 42rpx;
                height: 42rpx;
                border-radius: 50%;
            }
        }
    }
}
.user-border {
    border: 1px solid rgba(255, 255, 255, 0.4);
    padding: 10rpx;
    display: inline-block;
    border-radius: 50%;
    font-size: 0;
}
.user-border-2 {
    border-color: rgba(255, 255, 255, 0.8);
    padding: 10rpx;
}
.userinfo-avatar {
    overflow: hidden;
    width: 120rpx;
    height: 120rpx;
    /* margin: 20rpx; */
    border-radius: 50%;
    font-size: 0;
}

.center-box {
    box-sizing: border-box;
    position: relative;
    top: -80rpx;
    margin: 0 32rpx;
    background-color: #fff;
    border-radius: 14rpx;
    min-height: 49vh;
    padding: 20rpx 20rpx;
}
.col-item {
    padding: 28rpx 10rpx;
    display: flex;
    align-items: center;
    color: #666;
    border-bottom: 1rpx solid #f1f1f1;
    font-size: 28rpx;
    margin-top: 20rpx;
}
.col-item .l {
    width: 32rpx;
    height: 32rpx;
    margin-right: 30rpx;
    opacity: 0.5;
    font-size: 28rpx;
}
.col-item .m {
    flex: 1;
    font-weight: 500;
    font-family: "oswald", "SourceHanSansSC-Light", "Source-Han-Light",
        "Source Han Sans CN", "SourceHanSansCN-Light", "webfontSourceHanSansSC";
    .share {
        // display: inline;
        padding: 0;
        border: none;
        background-color: transparent;
        outline: none;
        text-align: left;
        color: #666;
        font-size: 28rpx;
        line-height: 1.2;
        &::after {
            border: none;
        }
    }
}
.col-item .r {
    width: 30rpx;
    height: 30rpx;
    opacity: 0.2;
}
</style>